<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>后台系统</title>
  <!-- 引入样式 -->

  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="../css/style.css">

  <!-- 引入组件库 -->

  <script src="../js/vue.js"></script>

  <script src="../element-ui/lib/index.js"></script>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script src="../js/axios-0.18.0.js"></script>


  <style scoped>
    .chat-window {
      padding: 20px;
    }
    .empty-chat-window {
      text-align: center;
      padding-top: 50px;
      color: #999;
    }
    .message {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
<div id="app">
  <template>
    <el-container style="height: 100vh;">
      <el-aside width="200px">
        <!-- 联系人列表 -->
        <el-menu :default-active="activeName" class="el-menu-vertical-demo" @select="handleContactClick">
          <el-menu-item v-for="(contact, index) in contacts" :key="index" :index="index">
            {{ contact.name }}
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!-- 聊天窗口 -->
          <div v-if="selectedContact !== null" class="chat-window">
            <div v-for="(message, index) in messages" :key="index" class="message">
              {{ message }}
            </div>
            <el-input v-model="newMessage" placeholder="请输入消息"></el-input>
            <el-button @click="sendMessage" type="primary">发送</el-button>
          </div>
          <div v-else class="empty-chat-window">请选择联系人开始聊天</div>
        </el-main>
      </el-container>
    </el-container>
  </template>

</div>

    <script>

      var vue = new Vue({
        el: '#app',
        data() {
          return {
            activeName: '1',
            contacts: [
              { name: '联系人1' },
              { name: '联系人2' },
              { name: '联系人3' },
            ],
            selectedContact: null,
            messages: [],
            newMessage: '',
          };
        },
        methods: {
          handleContactClick(index) {
            this.selectedContact = index;
          },
          sendMessage() {
            if (this.newMessage.trim() !== '') {
              this.messages.push(this.newMessage);
              this.newMessage = '';
            }
          },
        },
      });

</script>
</body>
</html>